<template>
	<div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="日期">
							<a-range-picker v-decorator="['data']" />
						</a-form-item>
					</a-col>
					<a-col :span="8" style="margin-top:2px;">
						<a-button type="primary" html-type="submit" class="btn1">搜索</a-button>
						<a-button :style="{ marginLeft: '8px' }" @click="handleReset" class="btn2">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div class="table">
			<el-table :data="data" v-loading="loading" :max-height="tableHeight" highlight-current-row
				style="width: 100%;">
				<el-table-column prop="Month" label="月份" min-width="100" align="center"></el-table-column>
				<el-table-column prop="StepMetre" label="运动距离" min-width="100" align="center">
					<template slot-scope="scope">
						<a-tag color="cyan">{{ (scope.row.StepMetre/1000).toFixed(2) }} KM</a-tag>
					</template>
				</el-table-column>
				<el-table-column prop="Target" label="目标" min-width="100" align="center">
					<template slot-scope="scope">
						{{ (scope.row.Target/1000).toFixed(2) }} KM
					</template>
				</el-table-column>
				<el-table-column prop="CompletionRate" label="完成度" header-align="right" min-width="100" align="right">
					<template slot-scope="scope">
						<div style="color:#f00;font-weight:bold;">{{ scope.row.CompletionRate }} % </div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	import {
		DoGetMonthSportStudent
	} from '@/api/follow';
	const data = [];
	export default {
		components: {},
		data() {
			return {
				data,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				loading: false,
				values: {},
				tableHeight: parseFloat(window.innerHeight - 160),
			};
		},
		computed: {},
		created() {
			this.getList();
		},
		mounted() {},
		methods: {
			moment,
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					if (values.data && values.data.length > 0) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				data = this.values;
				data.startTime = this.values.startTime ? this.values.startTime : moment()
					.subtract(12, 'months')
					.format('YYYY-MM');
				data.endTime = this.values.endTime ? this.values.endTime : moment().format('YYYY-MM');
				data.id = this.$route.query.ID
				let res = await DoGetMonthSportStudent(data);
				this.loading = false;
				this.data = res.data.data;
			},
		}
	};
</script>
